<template>
  <div>
    <div class="continal">
      <!-- 按钮操作区 -->
      <el-row>
        <el-col :span="5">
          <el-button type="primary" @click="showthis"><b>+</b> 新建</el-button>
          <el-button v-if="arr.length > 0" type="primary">删除</el-button>
          <el-button v-else disabled>删除</el-button>
          <el-button type="primary" @click="newlist">刷新</el-button>
        </el-col>
      </el-row>
      <!-- 下拉菜单区域 -->
      <el-row :gutter="20" style="margin-top: 30px;">
        <el-col :span="4">
          <el-select v-model="valuecangku" placeholder="请选择仓库" style="width: 100%;">
            <!-- 选择仓库 -->
            <el-option
              v-for="item in cangkulist"
              :key="item.Id"
              :label="item.Name"
              :value="item.Id"
            />
          </el-select>
        </el-col>
        <!-- 输入编号 -->
        <el-col :span="4">
          <el-input v-model="bianhao" placeholder="货区编号或名称" />
        </el-col>
        <!-- 选择货区类型 -->
        <el-col :span="4">
          <el-select v-model="valuetype" placeholder="货区类型" style="width:100%;">
            <!-- 获取货区类型 -->
            <el-option
              v-for="item in Hqtype"
              :key="item.Id"
              :label="item.Name"
              :value="item.Value"
            />
          </el-select>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="findhuo">查询</el-button>
          <el-button @click="pushnew">重置</el-button>
        </el-col>
      </el-row>
      <!-- table表格区域 -->
      <el-row style="margin-top:30px;">
        <el-table
          ref="multipleTable"
          :data="tableData"
          border
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            type="selection"
            width="55"
          />
          <el-table-column
            fixed
            prop="PB_Storage.Name"
            label="仓库"
            width="250"
          />
          <el-table-column
            prop="Code"
            label="货区编号"
            width="250"
          />
          <el-table-column
            prop="Name"
            label="货区名称"
            width="250"
          />
          <el-table-column prop="Type" label="货区类型" width="250">
            <template slot-scope="scope">{{ scope.row.Type == "Active" ? '正式货区(A)' : scope.row.Type==='In' ? '待入货区(I)' : '报损货区(B)' }}</template>
          </el-table-column>
          <el-table-column
            label="操作"
            width="250"
          >
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="handleClick(scope.row)">编辑</el-button>
              <el-button type="text" size="small" @click="shanchu(scope.row)">删除</el-button>
              <el-button type="text" size="small" @click="openthis(scope.row)">关联物料</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-row>
      <!-- 分页区域 -->
      <!-- 新建按钮弹出dialog -->
      <el-dialog :label-position="labelPosition" title="新增货区" :visible.sync="showDialog" width="40%">
        <el-form ref="formLabelAlign" :label-position="labelPosition" label-width="80px" :model="formLabelAlign" :rules="rules">
          <el-form-item label="货区编号" style="width: 100%;">
            <el-input v-model="formLabelAlign.Code" placeholder="系统自动生成" disabled />
          </el-form-item>
          <el-form-item label="仓库" prop="StorId">
            <!-- 仓库组件 -->
            <CangkuSelect v-model="formLabelAlign.StorId" />
          </el-form-item>
          <el-form-item label="货区类型" prop="Type">
            <!-- 货区类型组件 -->
            <HuoquType v-model="formLabelAlign.Type" />
          </el-form-item>
          <el-form-item label="货区名称" prop="Name">
            <el-input v-model="formLabelAlign.Name" placeholder="货区名称" style="width: 100%;" />
          </el-form-item>
          <el-button @click="close">取消</el-button>
          <el-button type="primary" @click="addtableList">确定</el-button>
        </el-form>
      </el-dialog>
      <!-- 关联物料 -->
      <el-drawer title="关联物料清单" :visible.sync="drawer" size="50%">
        <div class="contia">
          <!-- 关联物料上方操作按钮 -->
          <el-row>
            <el-col>
              <el-button type="primary" @click="wuliaodialog"><b>+</b> 添加</el-button>
              <el-button v-if="wuliaoarr.length>0" type="primary">删除</el-button>
              <el-button v-else disabled>删除</el-button>
              <el-button type="primary" @click="newlist">刷新</el-button>
            </el-col>
          </el-row>
          <!-- 关联物料下拉菜单 -->
          <el-row :gutter="20" style="margin-top: 30px; width: 100%;">
            <el-col :span="6">
              <el-input v-model="glwuliao" placeholder="物料" />
            </el-col>
            <el-col :span="6">
              <el-button type="primary" @click="findglwuliao">查询</el-button>
              <el-button @click="delglwuliao">重置</el-button>
            </el-col>

          </el-row>
          <!-- 关联物料table表格 -->
          <el-table ref="wuliaotable" :data="wuliaoData" style="width: 100%" border @selection-change="Changeis">
            <el-table-column type="selection" width="55" />
            <el-table-column fixed prop="PB_Material.Code" label="物料编码" width="200" />
            <el-table-column fixed prop="PB_Material.Name" label="物料名称" width="200" />
            <el-table-column fixed prop="PB_Material.Spec" label="物料规格" width="200" />
            <el-table-column align="" label="操作" width="200">
              <template slot-scope="scope">
                <el-button type="text" size="small" @click="delglwl(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-drawer>
      <!-- 点击添加按钮弹出dialog -->
      <el-dialog :label-position="labelPosition" title="物料选择" :visible.sync="wuliaoDialog" width="64%">
        <el-row :gutter="20" style="margin-top: 30px;">
          <el-col :span="4">
            <el-select ref="selectTree" v-model="Text" placeholder="物料类型" :value="newvalue">
              <el-option v-for="(item, index) in wuliaoType" :key="index" :label="item.Text" :value="item.Id" />
              <el-tree
                ref="selecteltree"
                :data="wuliaoType"
                node-key="wuliaoType.ID"
                :props="defaultProps"
                highlight-current
                :current-node-key="wuliaoType.value"
                :expand-on-click-node="true"
                default-expand-all
                @node-click="handleNodeClick"
              />
            </el-select>
          </el-col>
          <!-- 输入物料名称 -->
          <el-col :span="5">
            <el-input v-model="materielname" style="width: 100%;" placeholder="物料名称\编号\条码" />
          </el-col>
          <!-- 选择客户 -->
          <el-col :span="6">
            <el-input v-model="materielnumber" style="width: 100%;" placeholder="客户\供应商名称或编码" />
          </el-col>
          <el-col :span="4">
            <el-button type="primary" @click="wuliaofind">查询</el-button>
            <el-button @click="reset">重置</el-button>
          </el-col>
        </el-row>
        <el-row>
          <!-- 关联物料table -->
          <el-table ref="guanlianwuliaotable" :data="guanlianwuliaoData" style="width: 100%" border @selection-change="SelectionChange">
            <el-table-column type="selection" width="55" />
            <el-table-column fixed prop="Name" label="物料名称" style="width: 20%;" />
            <el-table-column fixed prop="Code" label="物料编码" style="width: 20%;" />
            <el-table-column fixed prop="MaterialType.Name" label="物料类别" style="width: 20%;" />
            <el-table-column fixed prop="BarCode" label="条码" style="width: 15%;" />
            <el-table-column fixed prop="SimpleName" label="物料简称" style="width: 10%;" />
            <el-table-column fixed prop="Spec" label="物料规格" style="width: 10%;" />
          </el-table>
        </el-row>
        <el-row type="flex" justify="end">
          <el-button @click="closethis">取消</el-button>
          <el-button type="primary" @click="addqueryList">选择</el-button>
        </el-row>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import { getAreaList, getWarehouseList, getHqtype, addArea, findCangku, editCangku, delCangku, getMaterialList, getWuliaoType, getQueryList, addQueryList, delQueryList } from '@/api/huoqu'
import CangkuSelect from './components/CangkuSelect.vue'
import HuoquType from './components/HuoquType.vue'
// import { diGuiDiaoyong } from '@/api/tree/tree'
export default {
  components: {
    CangkuSelect,
    HuoquType
  },
  data() {
    return {
      arr: [],
      drawer: false,
      valuecangku: '',
      Text: '',
      valuetype: '',
      cangkulist: [{}],
      wuliao: '',
      bianhao: '',
      tableData: [{}],
      wuliaoData: [{}],
      guanlianwuliaoData: [{}],
      wuliaoDialog: false,
      bianjiId: '',
      pageIndex: 1,
      pageSize: 10,
      showDialog: false,
      labelPosition: 'right',
      formLabelAlign: {
        Code: '',
        StorId: '',
        Type: '',
        Name: ''
      },
      defaultProps: {
        children: 'children',
        label: 'Text'
      },
      rules: {
        StorId: [{ required: true, message: '请选择仓库', trigger: 'blur' }],
        Type: [{ required: true, message: '请选择货区类型', trigger: 'blur' }],
        Name: [{ required: true, message: '请输入货区名称', trigger: 'blur' }]
      },
      Hqtype: [{}],
      wuliaoType: [{}],
      newvalue: '',
      materielname: '',
      materielnumber: '',
      selectId: '',
      pid: '',
      wuliaoarr: '',
      glwuliao: '',
      selectIds: '',
      rowid: ''
    }
  },
  created() {
    this.getHuoquList()
    this.getCangkuList()
    this.gethuoqutype()
  },
  methods: {
    // 获取货区列表
    async getHuoquList() {
      const res = await getAreaList({ pageIndex: this.pageIndex, pageRows: this.pageSize })
      console.log('table', res)
      this.tableData = res
    },
    // 打开弹窗
    showthis() {
      this.showDialog = true
    },
    // 获取仓库列表
    async getCangkuList() {
      const res = await getWarehouseList()
      console.log('仓库列表', res)
      this.cangkulist = res
    },
    // 刷新
    newlist() {
      this.getHuoquList()
    },
    // 获取货区类型
    async gethuoqutype() {
      const res = await getHqtype()
      this.Hqtype = res.EnumItems
      console.log('获取类型', this.Hqtype)
    },
    // 获取选择状态
    handleSelectionChange(val) { // 获取被选中仓库id
      // this.multipleSelection = val
      this.arr = val
      console.log('val', this.arr)
    },
    // 获取选择数据
    SelectionChange(val) {
      console.log('val', val)
      this.selectId = val[0].Id
      console.log('selectId', this.selectId)
    },
    // 取消新建
    close() {
      this.$refs.formLabelAlign.resetFields()
      this.showDialog = false
    },
    // 新增货区
    addtableList() {
      this.$refs.formLabelAlign.validate(async(valid) => {
        if (valid) {
          if (this.formLabelAlign.Code !== '') {
            console.log('编辑表单对象', this.formLabelAlign)
            await addArea(this.formLabelAlign)
          } else {
            console.log('表单对象', this.formLabelAlign)
            await addArea(this.formLabelAlign)
          }
          this.close()
          this.getHuoquList()
        } else {
          console.log('error submit!!')
        }
      })
    },
    // 查询
    async findhuo() {
      console.log('cangku', this.valuecangku, 'huoqu', this.valuetype, 'bianhao', this.bianhao)
      const res = await findCangku({ pageIndex: this.pageIndex, pageRows: this.pageSize, search: { keyword: this.bianhao, storageId: this.valuecangku, type: this.valuetype }})
      console.log('查询', res)
      this.tableData = res
    },
    // 重置
    pushnew() {
      this.valuecangku = ''
      this.valuetype = ''
    },
    // 编辑
    async handleClick(row) {
      const id = row.Id
      console.log(row.Id)
      this.showDialog = true
      const res = await editCangku({ id })
      console.log('编辑', res)
      this.bianjiId = res.Id
      this.formLabelAlign = { ...res }
    },
    // 删除
    async shanchu(row) {
      console.log(row.Id)
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delCangku([row.Id])
        this.getHuoquList()
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 打开关联物料
    async openthis(row) {
      this.drawer = true
      console.log('hang', row.Id)
      this.rowid = row.Id
      this.pid = this.rowid
      // 获取关联物料table
      const res = await getMaterialList({ areaId: this.rowid, pageIndex: this.pageIndex, pageRows: this.pageSize })
      console.log('关联物料', res)
      this.wuliaoData = res
    },
    // 打开关联物料框
    async wuliaodialog() {
      this.wuliaoDialog = true
      const res = await getWuliaoType()
      console.log('物料框', res)
      this.wuliaoType = res
      console.log('358', this.wuliaoType)
    },
    // shuxing
    handleNodeClick(node) {
      console.log('sadasd', node)
      this.Text = node.Text
      this.newvalue = node.Id
      console.log('newValye', this.newvalue)
      this.$refs.selectTree.blur()
    },
    // 获取物料查询列表
    async wuliaofind() {
      const res = await getQueryList({ pageIndex: this.pageIndex, pageRows: this.pageSize, search: { typeId: this.newvalue, contactName: this.materielname, keyword: this.materielnumber }})
      console.log('查询列表', res)
      this.guanlianwuliaoData = res
    },
    // 重置物料框
    reset() {
      this.Text = ''
      this.materielname = ''
      this.materielnumber = ''
    },
    // 取消
    closethis() {
      this.wuliaoDialog = false
    },
    // 添加选项表
    async addqueryList() {
      console.log(' sada', this.pid)
      const obj = { id: this.pid, keys: [this.selectId] }
      await addQueryList(obj)
      const res = await getMaterialList({ areaId: this.rowid, pageIndex: this.pageIndex, pageRows: this.pageSize })
      // console.log('关联物料', res)
      this.wuliaoData = res
      this.closethis()
    },
    // 获取关联物料选择状态
    Changeis(val) {
      this.wuliaoarr = val
      console.log('sele', val[0].Id)
      this.selectIds = val[0].AreaId
    },
    // 查询物料
    findglwuliao() {
      console.log(this.glwuliao)
      const res = this.wuliaoData.filter(item => item.PB_Material.Name === this.glwuliao)
      console.log('res', res)
      this.wuliaoData = res
      // this.openthis()
    },
    // 重置物料
    delglwuliao() {
      this.glwuliao = ''
    },
    // 删除关联物料
    async delglwl(row) {
      console.log('437', row)
      // console.log('441', this.wuliaoarr[0].AreaId)
      // this.selectIds.push()
      await delQueryList({ AreaId: row.AreaId, select: [row.MaterialId] })
      const res = await getMaterialList({ areaId: this.rowid, pageIndex: this.pageIndex, pageRows: this.pageSize })
      this.wuliaoData = res
      this.$message.success('删除成功')
    }
  }
}
</script>
<style scoped>
.continal{
  margin-top:100px ;
  margin-left:80px;
}
.contia {
  margin-top:20px ;
  margin-left:40px;
}
</style>
